<template>
    <div> <el-form :inline="true" :model="admcont" class="demo-form-inline">
        <el-form-item label="部门名称：">
            <el-input v-model="admcont.contactDept" placeholder="部门名称"></el-input>
        </el-form-item>
        <el-form-item label="手机号码：">
            <el-input v-model="admcont.contactPhone" placeholder="手机号码"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="GetAdmContacts" plain>查询</el-button>
        </el-form-item>
        <el-button type="primary"  @click="addContacts" plain>添加联系人</el-button>
    </el-form>
    <el-table
            :data="admcontacts.slice((currentPage-1)*pagesize,currentPage*pagesize)" height="500" border style="width: 100%"
            >
        <el-table-column
                prop="unitname"
                label="单位名称"
                width="180">
        </el-table-column>
        <el-table-column
                prop="contactDept"
                label="部门"
                width="180">
        </el-table-column>
        <el-table-column
                prop="contactName"
                label="联系人">
        </el-table-column>
        <el-table-column
                prop="contactPhone"
                label="手机号码">
        </el-table-column>
        <el-table-column
                prop="contactTel"
                label="固定电话">
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-dropdown>
                    <el-button type="primary" size="small">
                        操作<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <!--<el-dropdown-item size="small" @click.native="UpExpType(scope)">修改</el-dropdown-item>-->
                        <el-dropdown-item size="small" @click.native="del(scope)">删除</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </template>
        </el-table-column>

    </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 20, 40]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="admcontacts.length">
        </el-pagination>
        <el-dialog :visible.sync="dialogVisible" width="50%">
            <add @coles="coles" :dialogVisible="dialogVisible" @AddContacts="AddCont"></add>
        </el-dialog>
    </div>

</template>

<script>
    import admco from "../../../model/gsl/AdmContacts/admcontacts"
    import add from "../AdmAddresslist/AdmContactsAdd"
    const co = admco.getInstance();
    export default {
        name: "AdmContacts",
        components:{add},
        data() {
            return {
                currentPage:1, //初始页
                pagesize:10,    //    每页的数
                dialogVisible:false,
                admcontacts:[],
                admcont:{}
            };
        },
        created(){
            //后台请求数据
            this.GetAdmContacts();
        },
        methods: {
            // 初始页currentPage、初始每页数据数pagesize和数据data
            handleSizeChange: function (size) {
                this.pagesize = size;
                console.log(this.pagesize)  //每页下拉显示数据
            },
            handleCurrentChange: function(currentPage){
                this.currentPage = currentPage;
                console.log(this.currentPage)  //点击第几页
            },
            addContacts(){
                this.dialogVisible=true;
            },
            AddCont(ss){
                console.log(ss)
                co.save(ss).then(() => {
                    this.dialogVisible=false;
                    this.GetAdmContacts();
                })
            },
            GetAdmContacts() {
                co.list(this.admcont).then((response) => {
                    this.admcontacts = response.data.data;
                })
            },
            coles(col){
                this.dialogVisible=col;
            },
            del(ss){
                console.log(ss)
                co.remove(ss.row.id).then((re) => {
                    if (re.data.data==1) {
                        this.$message.success({
                            message:'删除成功',
                            duration:1000
                        })
                        this.dialogVisible=false;
                        this.GetAdmContacts();
                    }else {
                        this.$message.success({
                            message:'删除失败',
                            duration:1000
                        })
                    }

                })
            }

        },
        }
</script>

<style scoped>

</style>